<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #000;
      }
      .light {
        width: 2px;
        height: 30px;
        background-color: #fff;
        animation: shrink 0.7s linear 0s infinite;
        display: inline-block;
      }

      @keyframes shrink {
        0% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }

      .content {
        vertical-align: super;
        display: inline-block;
        color: #fff;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="content"></div>
    <div class="light"></div>

    <audio src="other/keys.mp3" id="audio" loop></audio>

    <script>
      let content = document.querySelector(".content");
      let audio = document.querySelector("#audio");

      let str = "床前明月光，疑是地上霜。";

      let i = 0;

      let index;

      function start() {
        index = setInterval(() => {
          if (audio.paused) {
            audio.play();
          }

          content.innerText = content.innerText + str[i++];

          if (i >= str.length) {
            clearInterval(index);
            audio.pause();
          }
        }, 1000);
      }

      window.addEventListener("click", start);
    </script>
  </body>
</html>
